<template>
  <view class="container">
    <!-- 复习卡片列表 -->
    <view 
      v-for="(item,index) in setstor" 
      :key="index"
      class="word-card"
      :class="{'card-active': activeIndex === index}"
      @touchstart="handleTouchStart(index)"
      @touchend="handleTouchEnd"
    >
      <!-- 卡片内容 -->
      <view class="card-content">
        <view class="word-header">
          <text class="pos-tag">{{item.pos}}</text>
          <text class="kana">{{item.kana}}</text>
        </view>
        <text class="kanji">{{item.word}}</text>
        <view class="translation-box">
          <uni-icons type="translation" size="18" color="#757575" />
          <text class="translation">{{item.translation}}</text>
        </view>
      </view>
      
      <!-- 操作按钮 -->
      <button 
        class="action-btn"
        :class="{'btn-pressed': activeIndex === index}"
        @click="deleteItem(index)"
      >
        <uni-icons type="checkmark" size="20" color="#fff" />
        <text>已掌握</text>
      </button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onShow } from "@dcloudio/uni-app"

const setstor = ref([])

// 显示时读取存储（带去重）
onShow(() => {
  loadStorageData()
})

// 加载存储数据
const loadStorageData = () => {
  const value = uni.getStorageSync('storage_key') || []
  const uniqueValues = [...new Set(value.map(JSON.stringify))].map(JSON.parse)
  setstor.value = uniqueValues
}

// 删除指定元素
const deleteItem = (index) => {
  try {
    // 1. 获取原始数组（带引用）
    const rawList = uni.getStorageSync('storage_key') || []
    
    // 2. 执行删除操作[2,4](@ref)
    if (index > -1 && index < rawList.length) {
      rawList.splice(index, 1)
      
      // 3. 更新存储
      uni.setStorageSync('storage_key', rawList)
      
      // 4. 更新显示数据
      loadStorageData()
      
     
    }
  } catch (e) {
    console.error('删除失败:', e)
    uni.showToast({ title: '操作失败', icon: 'none' })
  }
}
const activeIndex = ref(-1)

const handleTouchStart = (index) => {
  activeIndex.value = index
}

const handleTouchEnd = () => {
  activeIndex.value = -1
}
</script>

<style scoped lang="scss">
$primary-color: #4CAF50;
$secondary-color: #81C784;
$text-primary: #2D3436;
$text-secondary: #636E72;

.container {
  padding: 30rpx;
  background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%);
}

.word-card {
  background: #FFF;
  border-radius: 24rpx;
  margin-bottom: 32rpx;
  box-shadow: 0 8rpx 30rpx rgba(0,0,0,0.08);
  transition: all 0.2s ease;
  
  &.card-active {
    transform: translateY(-4rpx);
    box-shadow: 0 12rpx 40rpx rgba(0,0,0,0.12);
  }
}

.card-content {
  padding: 40rpx;
  
  .word-header {
    display: flex;
    align-items: baseline;
    margin-bottom: 20rpx;
    
    .pos-tag {
      font-size: 24rpx;
      color: #FFF;
      background: $secondary-color;
      padding: 6rpx 16rpx;
      border-radius: 8rpx;
      margin-right: 16rpx;
    }
    
    .kana {
      font-size: 32rpx;
      color: $text-secondary;
    }
  }
  
  .kanji {
    display: block;
    font-size: 72rpx;
    color: $text-primary;
    text-align: center;
    margin: 40rpx 0;
    font-weight: 500;
  }
  
  .translation-box {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24rpx;
    background: #F8F9FA;
    border-radius: 16rpx;
    
    .translation {
      font-size: 32rpx;
      color: $text-secondary;
      margin-left: 16rpx;
    }
  }
}

.action-btn {
  width: 100%;
  height: 96rpx;
  background: linear-gradient(90deg, $primary-color, $secondary-color);
  border-radius: 0 0 24rpx 24rpx;
  color: #FFF;
  font-size: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
  transition: all 0.2s ease;
  
  &::after {
    display: none;
  }
  
  &.btn-pressed {
    opacity: 0.9;
    transform: scale(0.98);
  }
}
</style>